<template>
  <!-- This component assumes it's placed inside the default slot of Vue Flow's <Controls> component -->
  <ControlButton
      v-if="appConfig.controlsShowRedoLayout"
      @click="handleRedoLayout"
      title="重新布局"
  >
    <el-icon><Refresh /></el-icon>
  </ControlButton>
  <ControlButton
      v-if="appConfig.controlsShowToggleOrientation"
      @click="handleToggleOrientation"
      title="切换布局方向"
  >
    <el-icon><Rank /></el-icon>
  </ControlButton>
  <ControlButton
      @click="openSettingsDialog"
      title="可视化设置"
  >
    <el-icon><Setting /></el-icon>
  </ControlButton>

  <!-- IMPORTANT: Coloring Settings Dialog logic needs to be handled. -->
  <!-- Option 1: Move the ElDialog here too (complex state). -->
  <!-- Option 2: Emit an event to the parent to open the dialog. -->
  <!-- Let's assume Option 2 for now. The button @click will need to change to emit. -->
  <!-- Example: @click="$emit('open-coloring-dialog')" -->
  <!-- The actual ElDialog component stays in the parent (UniversalVisualizer.vue) -->

</template>

<script setup lang="ts">
import { ref, defineEmits, nextTick } from 'vue'; // Import defineEmits and nextTick
import { ControlButton } from '@vue-flow/controls';
import { ElIcon, ElTooltip } from 'element-plus';
import {
  Refresh, Rank, Setting
} from '@element-plus/icons-vue';
import appConfig from '@/config'; // Import appConfig for v-if conditions
import { useUniversalVisualizerSettingsStore } from '@/stores/universalVisualizerSettingsStore';
import { useUniversalEditorStore } from '@/stores/universalEditorStore'; // Needed for redoLayout
import { useVueFlow } from '@vue-flow/core'; // Needed for fitView after layout change

// --- CORRECTED: Define Emits at the top level ---
const emit = defineEmits<{ (e: 'open-settings-dialog'): void }>();

// Access stores
const visualizerSettings = useUniversalVisualizerSettingsStore();
const editorStore = useUniversalEditorStore();
const { fitView } = useVueFlow(); // Get fitView if needed here

// --- Methods ---
const handleRedoLayout = () => {
    console.log('[CustomControls] Redo layout clicked');
    editorStore.redoLayout();
    nextTick(() => {
        if (fitView) {
            fitView({ padding: 0.1, duration: 200 });
        } else {
            console.warn('[CustomControls] fitView function not available.');
        }
    });
};

const handleToggleOrientation = () => {
    const currentOrientation = visualizerSettings.layoutDirection;
    const newOrientation = currentOrientation === 'TB' ? 'LR' : 'TB';
    console.log(`[CustomControls] Toggling layout orientation to: ${newOrientation}`);
    visualizerSettings.setLayoutDirection(newOrientation); // Update store
    editorStore.redoLayout(); // Trigger layout recalculation
    nextTick(() => {
        if (fitView) {
            fitView({ padding: 0.1, duration: 200 });
        } else {
             console.warn('[CustomControls] fitView function not available.');
        }
    });
};

// Method to emit event for opening the main settings dialog
const openSettingsDialog = () => {
  // Use the emit function defined above
  emit('open-settings-dialog');
};

// --- REMOVE Unused Local State ---
// const showColoringSettingsDialog = ref(false);

</script>

<style lang="scss" scoped>
/* Remove styles related to the removed popovers if they were specific */
/* Keep general styles for ControlButton if any */
</style>
